<template>
  <div class="weather" ref="homePage">
    <div class="bj">
      <van-nav-bar title="天气" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="weatherdetails_box">
      <div class="box_top">
        <div style="font-size: 60px;font-weight: 600;height: 75px;line-height: 75px;">
          <span>{{sk.temp}}°</span>
          <van-icon :name="tianqi+tubiao+'.png'" />
        </div>
        <!-- <div class="txt">
          <span>空气质量 良</span>
        </div> -->
        <div class="txt">
          <span>空气湿度 {{sk.humidity}}</span>
        </div>
        <div class="txt">
          <span>{{sk.wind_direction}} {{sk.wind_strength}}</span>
        </div>
      </div>
      <div class="box_center">
        <p>七天预报</p>
        <van-swipe :loop='false' :show-indicators="false" :width="100">
          <van-swipe-item v-for="(itme,index) in future" :key="index">
            <div class="center_txt">
              <span>{{itme.week}}</span>
              <span>{{itme.date}}</span>
              <span>{{itme.weather}}</span>
              <span>{{itme.temperature}}</span>
              <span>
                <van-icon :name="tianqi+itme.weather_id.fa+'.png'" /></span>
            </div>
          </van-swipe-item>

        </van-swipe>

      </div>
      <div class="box_bottm">
        <p>指数</p>
        <div class="bottm_index">
          <div class="index_div" style="border-top: 0;border-left: 0;">
            <van-icon name="http://cs2.botuu.com/lsl/botu/img/icon01.png" />
            <div>
              <span style="color: rgb(244, 244, 244);">穿衣指数&#12288;</span>
              <span>{{today.dressing_index}}</span>
            </div>
          </div>
          <div class="index_div" style="border-top: 0;">
            <van-icon name="http://cs2.botuu.com/lsl/botu/img/icon02.png" />
            <div>
              <span style="color: rgb(244, 244, 244);">舒适度指数</span>
              <span>{{today.comfort_index}}</span>
            </div>
          </div>
          <div class="index_div" style="border-top: none;border-bottom: none;border-left: 0;">
            <van-icon name="http://cs2.botuu.com/lsl/botu/img/icon03.png" />
            <div>
              <span style="color: rgb(244, 244, 244);">紫外线强度</span>
              <span>{{today.uv_index}}</span>
            </div>
          </div>
          <div class="index_div" style="border-top: none;border-bottom: none;">
            <van-icon name="http://cs2.botuu.com/lsl/botu/img/icon04.png" />
            <div>
              <span style="color: rgb(244, 244, 244);">旅游指数&#12288;</span>
              <span>{{today.travel_index}}</span>
            </div>
          </div>
          <div class="index_div" style="border-bottom: none;border-left: 0;"><!-- background:rgb(71, 208, 201) -->
            <van-icon name="http://cs2.botuu.com/lsl/botu/img/icon05.png" />
            <div>
              <span style="color: rgb(244, 244, 244);">晨练指数&#12288;</span>
              <span>{{today.exercise_index}}</span>
            </div>
          </div>
          <div class="index_div" style="border-bottom: none;" >
            <van-icon name="http://cs2.botuu.com/lsl/botu/img/icon06.png" />
            <div>
              <span style="color: rgb(244, 244, 244);">干燥指数&#12288;</span>
              <span>{{today.drying_index}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  import {
    getWeather
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        input: '',
        // swiperOption: {
        //   slidesPerView: 3,
        //   spaceBetween: 30,
        // },
        tubiao:'',
        sk: {},
        future: [],
        today:{},
        tianqi:"http://cs2.botuu.com/lsl/botu/tianqi/wid_",
      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      // var swiper = new Swiper('.swiper-container', {
      //   slidesPerView: 5.5,
      //   paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      //   spaceBetween: 10, //slide之间的距离（单位px）。
      //   freeMode: false, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
      //   loop: false, //是否可循环
      // });
      this.getWeather();
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      getWeather() {
        let data = {
          "City": "深圳",
        }
        getWeather(data).then(res => {
          console.log(res.Data)
          this.sk = res.Data.result.sk
          // console.log(this.sk)
          this.future = res.Data.result.future
          // console.log(this.future)
          this.today = res.Data.result.today
          this.tubiao = res.Data.result.today.weather_id.fa;
          // console.log(this.tubiao)
        })
      }
    }
  }
</script>

<style lang="scss">
 .weather {
   // background: white;
   color: white;
   background: #46d0ca;

   .bj {
     .van-icon {
       color: white !important;

     }
   }


   .weatherdetails_box {
     width: 100%;
     // height: 100%;
     background: url(../../assets/1.jpg) no-repeat;
     background-size: 100% 100%;
     position: absolute;

     .box_top {
       // padding: 20px;
       height: 30%;
       font-size: 14px;
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;

       .txt {
         padding: 5px 0;
       }
       .van-icon{
         font-size: 20px !important;
       }
     }

     .box_center {
       width: 100%;
       height: 200px;
       // background: white;
       font-weight: 400;
       border-bottom: 1px solid #d1deea7d;
       border-top: 1px solid #d1deea7d;

       .swiper-slide {
         margin-right: 0px !important;
       }

       p {
         padding: 20px;
         font-size: 16px;
       }

       .center_txt {
         width: 100px;
         height: 120px;
         display: flex;
         flex-direction: column;
         border-right: 1px solid #d1deeaa6;
         align-items: center;
         font-size: 14px;

         .van-icon {
           color: white !important;
         }
         span {
           padding: 2px 0;
         }
       }
     }
     .box_bottm {
       width: 100%;
       // height: 200px;
       display: flex;
       flex-direction: column;
       font-weight: 400;
       font-size: 16px;
       // background: #4E;
       p {
         padding: 20px;
       }

       .bottm_index {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         border-bottom: 1px solid #d1deea7d;
         border-top: 1px solid #d1deea7d;
         .index_div {
           width: 50%;
           height: 80px;
           display: flex;
           justify-content: center;
           align-items: center;
           border: 1px solid #d1deea7d;
           font-size: 14px;
           .van-icon {
             font-size: 30px !important;
             color: white !important;
           }

           div {
             display: flex;
             flex-direction: column;
             margin-left: 10px;
           }
         }
       }
     }
   }
 }
</style>
